var json = [
    {
        h3link:"#",
        buy:"#",
        banner:"./Image/product/xiaomi/xiaomi.png",
        h3:["Xiaomi MIX系列","Xiaomi 数字系列","Xiaomi Civi"],
        h4:["Xiaomi MIX Fold 3","Xiaomi 14 Pro","Xiaomi 14","Xiaomi 13 Ultra","Xiaomi 13 Pro","Xiaomi Civi 3","Xiaomi Civi 2"],
        goods:["./Image/product/xiaomi/fold3.png",
        "./Image/product/xiaomi/m14p.png",
        "./Image/product/xiaomi/m14.png",
        "./Image/product/xiaomi/m13u.png",
        "./Image/product/xiaomi/m13p.png",
        "./Image/product/xiaomi/civi3.png",
        "./Image/product/xiaomi/civi2.png",
        ],
    },

];

//把json数据变成上图下文，在网页中显示出来
/* 先获取ul */
var plist = document.querySelector(".p-list");
/* 创建节点 */
for(var v of json ){/* v = json数据 */
    /* 1.创建li节点 */
    var nli = document.createElement("li");
    /* 2.填充内容 */
    nli.innerHTML = `


    <a href="${v.h3link}">
        <img src="${v.banner}">
    </a>
    <h3>${v.h3[0]}</h3>
    <ul>
        <li><a href="${v.buy}">
                <img src="${v.goods[0]}">
                <div>
                    <h4>${v.h4[0]}</h4>
                    <p>￥8999起</p>
                </div>
            </a>
        </li>

        <h3>${v.h3[1]}</h3>
        <li><a href="${v.buy}">
                <img src="${v.goods[1]}">
                <div>
                    <h4>${v.h4[1]}</h4>
                    <p>￥4999起</p>
                </div>
            </a>
        </li>
        <li><a href="${v.buy}">
                <img src="${v.goods[2]}">
                <div>
                    <h4>${v.h4[2]}</h4>
                    <p>￥3999起</p>
                </div>
            </a>
        </li>
        <li><a href="${v.buy}">
            <img src="${v.goods[3]}">
            <div>
                <h4>${v.h4[3]}</h4>
                <p>￥5999起</p>
            </div>
        </a>
    </li>
    <li><a href="${v.buy}">
        <img src="${v.goods[4]}">
        <div>
            <h4>${v.h4[4]}</h4>
            <p>￥4999起</p>
        </div>
    </a>
    </li>


        <h3>${v.h3[2]}</h3>
        <li><a href="${v.buy}">
                <img src="${v.goods[5]}">
                <div>
                    <h4>${v.h4[5]}</h4>
                    <p>￥2399起</p>
                </div>
            </a>
        </li>
        <li><a href="${v.buy}">
            <img src="${v.goods[6]}">
            <div>
                <h4>${v.h4[6]}</h4>
                <p>￥2499起</p>
            </div>
        </a>
    </li>
    </ul>

    `;/* 反引号 键盘1旁边` */
    /* 3.把节点放到ul里 */
    plist.appendChild(nli);
}
